<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'审批记录',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="nostrongtext shenpi" @click="shaixuanShow = true">筛选</view>
				</view>
			</view>
		</header-top>
		<!-- 筛选弹出层 -->
		<u-popup round="20" :show="shaixuanShow">
			<view class="flexcenter mainpadding">
				<view class="titletext">筛选</view>
			</view>
			<view class="strongtext  mainpadding2">
				<text class="titletext textliner">审批状态</text>
			</view>
			<view class="mainpadding2 ffffff">
				<view class="flexbetween">
					<view v-for="(item,index) in lists" :key="item.id" @click="change(item.id)"
						:class="currents == item.id?'select margin_box margin_top':'noselect margin_box margin_top'">
						<text class="shenptext">{{item.name}}</text>
						<view class="selectimage" v-show="currents == item.id?'true':'false'"></view>
					</view>
				</view>
			</view>
			<view class="strongtext  mainpadding">
				<text class="titletext textliner">时间</text>
			</view>
			<view class=" mainpadding2 ffffff">
				<view class="inputbox flexbetween" @click="show = true">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">开始时间</view>
					</view>
					<view class="itembox flexbetween">
						<input type="text" class="inputstyle" placeholder="请选择" disabled v-model="start">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="inputbox flexbetween" @click="shows = true">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">结束时间</view>
					</view>
					<view class="itembox flexbetween">
						<input type="text" class="inputstyle" placeholder="请选择" disabled v-model="end">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="surepop">确认</view>
				</view>
			</view>
			
		</u-popup>
		<view class="flexaround ffffff tabs mainpadding" v-if="usergroup==1">
			<view :class="current==1?'focustext':'nofocustext'" @click="selectab(1)">我的申请</view>
			<view class="fenge"></view>
			<view :class="current==2?'focustext':'nofocustext'" @click="selectab(2)">我的审批</view>
		</view>
		<view class="mainpadding2" v-show="current==1">
			<view class="ffffff radius margin_top" v-for="item in listsq.data" :key="item.id" @click="shenhxqetg(item.id,1)">
				<view class="box1 mainpadding">
					<view class="flexleft">
						<view class="leftimg">
							<image :src="item.staff.avatar_text" mode=""></image>
						</view>
						<view class="shiyou onetext">姓名：
							<text style="color: #000;">{{item.staff.username}}</text>
						</view>
					</view>
					<view class="shiyou onetext margin_top">事由：
						<text style="color: #000;">{{item.notes}}</text>
					</view>
					<view class="shiyou">时间：
						<text style="color: #000;">{{item.start_time_text}} 至 {{item.end_time_text}} {{item.xc_time}}</text>
					</view>
					<!-- 10=待审核,20=审核通过,30=审核拒绝,40=已撤回,50=已作废 -->
					<view class="daishenpi" v-if="item.status==10">待审批</view>
					<view class="xiaobig" v-if="item.status==20">通过</view>
					<view class="jujue" v-if="item.status==30">拒绝</view>
					<view class="yizuofei" v-if="item.status==40">已撤回</view>
					<view class="yichehui" v-if="item.status==50">已作废</view>
					<view class="flexcenter margin_top" v-if="item.status==10" @click.stop="chehui(item.id)">
						<view class="zuofei">撤回</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2" v-show="current==2">
			<view class="ffffff radius margin_top" v-for="item in listsq.data" :key="item.id" @click="shenhxqetg(item.id,2)">
				<view class="box1 mainpadding">
					<view class="flexleft">
						<view class="leftimg">
							<image :src="item.staff.avatar_text" mode=""></image>
						</view>
						<view class="shiyou onetext">姓名：
							<text style="color: #000;">{{item.staff.username}}</text>
						</view>
					</view>
					<view class="shiyou onetext margin_top">事由：
						<text style="color: #000;">{{item.notes}}</text>
					</view>
					<view class="shiyou">时间：
						<text style="color: #000;">{{item.start_time_text}} 至 {{item.end_time_text}} {{item.xc_time}}</text>
					</view>
					<!-- 10=待审核,20=审核通过,30=审核拒绝,40=已撤回,50=已作废 -->
					<view class="daishenpi" v-if="item.status==10">待审批</view>
					<view class="xiaobig" v-if="item.status==20">通过</view>
					<view class="jujue" v-if="item.status==30">拒绝</view>
					<view class="yizuofei" v-if="item.status==40">已撤回</view>
					<view class="yichehui" v-if="item.status==50">已作废</view>
				</view>
			</view>
		</view>
		<!-- 开始时间 -->
		<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm" @cancel="cancel">
		</u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :minDate='mintime' :show="shows" v-model="value2" mode="date" @confirm="confirms" @cancel="cancels">
		</u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shaixuanShow:false,//pop弹出层
				current: 1,
				lists: [
					{
						name: '全部',
						id: 0
					},
					{
						name: '待审批',
						id: 10
					},
					{
						name: '审批通过',
						id: 20
					},
					{
						name: '审批拒绝',
						id: 30
					},
					{
						name: '已撤回',
						id: 40
					},
					{
						name: '已作废',
						id: 50
					},
				],
				splists: [],
				show: false,
				value1: Number(new Date()),
				shows: false,
				value2: Number(new Date()),
				start: '',
				end: '',
				currents: 0,
				mintime:Number(new Date()),
				limit: 12,
				// 我的申请
				pagesq: 1,
				listsq: {
					data: []
				},
				// 我的审批
				pagesp: 1,
				listsp: {
					data: []
				},
				usergroup:1,
				pageShow:false
			}
		},
		onLoad(options) {
			if(options.type){
				this.currents = options.type
			}
			this.mysq()
			// this.userxinxi()
		},
		methods: {
			
			// 获取用户信息
			userxinxi() {
				let sp_id = this.$store.state.userInfo.bmstaffinfo.id
				let userid = this.$store.state.userInfo.id
				if(sp_id==userid){
					this.usergroup = 1
				}else{
					this.usergroup = 0
				}
			},
			chehui(id){
				httpRequest.request('/dhtapi/user/czQj', 'POST', {
					id,
					status:40
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if(res.code==1){
						this.mysq()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			mysq(isPage, page) {
				let _this = this;
				httpRequest.request('/dhtapi/user/qjIndex', 'POST', {
					page: page || 1,
					limit: _this.limit,
					status:this.currents,
					tab:this.current,
					start_time:this.start,
					end_time:this.end
				}, false, false, true).then(res => {
					this.pageShow = true
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listsq;
						if (isPage == true) {
							_this.listsq.data = dataList.data.concat(resList.data);
						} else {
							this.listsq = resList
							_this.listsq.data = resList.data;
						}
					}
					
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let listsq = _this.listsq;
				let pagesq = _this.pagesq;
				if (listsq.last_page <= pagesq) {
					return false;
				}
				pagesq++;
				_this.pagesq = pagesq;
				_this.mysq(true, pagesq);
			},
			// 重置
			resetbtn(){
				this.currents = 0
				this.start = ""
				this.end = ""
				this.shaixuanShow = false
				this.mysq()
			},
			change(id) {
				this.currents = id;
			},
			surepop(){
				this.mysq()
				this.shaixuanShow = false
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
			
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			
			confirm(e) {
				console.log(e)
				this.mintime = e.value;
				this.end = '';
				this.start = this.date(e.value);
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			confirms(e) {
				console.log(e);
				this.end = this.date(e.value);
				this.shows = false;
			},
			cancels() {
				this.shows = false;
			},
			selectab(i) {
				this.current = i
				this.mysq()
			},
			//审批详情通过
			shenhxqetg(id,value){
				let data = {
					id,
					value
				}
				uni.navigateTo({
					url:"/pages/workbench/xiaoshou/shenhexqdsp?msg="+ encodeURIComponent(JSON.stringify(data))
				})
			},
			//筛选
			// shaixuan(){
			// 	uni.navigateTo({
			// 		url:"/pages/workbench/xiaoshou/shaixuanspjl"
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	
	.zuofei{
		border-radius: 10rpx;
		border: 1rpx solid #db201e;
		padding: 10rpx 0rpx;
		text-align: center;
		width: 200rpx;
		color: #db201e;
	}
	.box1 {
		position: relative;
	}

	.left {
		padding-top: 30rpx;
	}

	//通过
	.xiaobig {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background: #e7f9fa;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	//拒绝
	.jujue {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background: #ffe6e6;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	//待审批
	.daishenpi {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background: #fef7ec;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	//已作废
	.yizuofei {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background:#f0f0f0;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	//已撤回
	.yichehui {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background: #f0f0f0;
		height: 36rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.onetext {
		margin-bottom: 20rpx;
	}

	.shiyou {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.leftimg {
		min-width: 80rpx;
		min-height: 80rpx;
		width: 80rpx;
		margin-right: 20rpx;
		height: 80rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.focustext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.fenge {
		width: 1rpx;
		height: 28rpx;
		background-color: rgba(153, 153, 153, .3);
	}

	.nofocustext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
	}
	.strongtext {
		padding-bottom: 20rpx;
	}
	
	.quebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 672rpx;
		height: 82rpx;
		background: #00B855;
		border-radius: 41rpx;
		margin-top: 150rpx;
	}
	
	.flexbetween {
		flex-wrap: wrap;
	}
	
	.textxz {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
	}
	
	.textxzs {
		font-size: 28rpx;
		margin-top: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 18rpx;
	}
	
	.shenptext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	
	/* 未选中状态 */
	.noselect {
		font-size: 24rpx;
		font-weight: 500;
		color: #000000;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		width: 184rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* 选中状态 */
	.select {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
		width: 184rpx;
		height: 64rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #0BBDCB;
	}
	
	.selectimage {
		width: 28rpx;
		height: 26rpx;
		right: -5%;
	}
	
	.flex1 {
		flex: 3;
	}
	
	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}
	
	.inputstyle {
		font-size: 28rpx;
		color: #999999;
	}
	
	.inputbox {
		padding-top: 30rpx;
	
	}
	.surebtn{
		width: 45%;
	}
	.reset{
		background: #ebb563;
	}
</style>
